<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 transition-colors duration-300">
    <div class="mx-auto w-full container p-4 py-6 lg:py-6">
        <div class="md:flex md:justify-between">
            <div class="mb-6 md:mb-0">
                <a href="{% url 'djs_guide:index' %}" class="flex gap-2 items-center">
                    <i class="fa-brands fa-python text-blue-500 text-2xl"></i>
                    <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">DjangoStarter</span>
                </a>
                <p class="max-w-md mt-2 text-sm text-gray-500 dark:text-gray-400">
                    DjangoStarter v3 是下一代 Django 项目快速开发模板，专为提升开发效率和性能而设计。
                </p>
            </div>
            <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
                <div>
                    <h2 class="mb-4 text-sm font-semibold text-gray-900 uppercase dark:text-white">相关资源</h2>
                    <ul class="text-gray-500 dark:text-gray-400 font-medium space-y-2">
                        <li>
                            <a href="https://deali.cn/" class="text-sm hover:text-blue-600 dark:hover:text-blue-500 transition-colors" target="_blank">
                                <i class="fa-solid fa-link mr-1 text-xs"></i>CodeLab
                            </a>
                        </li>
                        <li>
                            <a href="http://blog.deali.cn/" class="text-sm hover:text-blue-600 dark:hover:text-blue-500 transition-colors" target="_blank">
                                <i class="fa-solid fa-blog mr-1 text-xs"></i>StarBlog
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h2 class="mb-4 text-sm font-semibold text-gray-900 uppercase dark:text-white">关注我们</h2>
                    <ul class="text-gray-500 dark:text-gray-400 font-medium space-y-2">
                        <li>
                            <a href="https://github.com/deali-Axy/" class="text-sm hover:text-blue-600 dark:hover:text-blue-500 transition-colors" target="_blank">
                                <i class="fa-brands fa-github mr-1"></i>Github
                            </a>
                        </li>
                        <li>
                            <a href="https://discord.gg/4eeurUVvTy" class="text-sm hover:text-blue-600 dark:hover:text-blue-500 transition-colors" target="_blank">
                                <i class="fa-brands fa-discord mr-1"></i>Discord
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h2 class="mb-4 text-sm font-semibold text-gray-900 uppercase dark:text-white">法律信息</h2>
                    <ul class="text-gray-500 dark:text-gray-400 font-medium space-y-2">
                        <li>
                            <a href="{% url 'djs_about:privacy_policy' %}" class="text-sm hover:text-blue-600 dark:hover:text-blue-500 transition-colors">
                                <i class="fa-solid fa-shield-alt mr-1 text-xs"></i>隐私政策
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'djs_about:terms_of_service' %}" class="text-sm hover:text-blue-600 dark:hover:text-blue-500 transition-colors">
                                <i class="fa-solid fa-file-contract mr-1 text-xs"></i>服务条款
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <hr class="my-5 border-gray-200 dark:border-gray-700"/>
        <div class="sm:flex sm:items-center sm:justify-between text-sm">
          <span class="text-gray-500 dark:text-gray-400">
              © 2025 <a href="https://deali.cn/" class="hover:text-blue-600 dark:hover:text-blue-500 transition-colors">CodeLab™</a>. 保留所有权利
          </span>
            <div class="flex mt-4 sm:justify-center sm:mt-0 space-x-4">
                <a href="#" class="text-gray-500 hover:text-blue-600 dark:hover:text-white transition-colors">
                    <i class="fa-brands fa-facebook-f"></i>
                    <span class="sr-only">Facebook</span>
                </a>
                <a href="#" class="text-gray-500 hover:text-purple-600 dark:hover:text-white transition-colors">
                    <i class="fa-brands fa-discord"></i>
                    <span class="sr-only">Discord</span>
                </a>
                <a href="#" class="text-gray-500 hover:text-blue-400 dark:hover:text-white transition-colors">
                    <i class="fa-brands fa-twitter"></i>
                    <span class="sr-only">Twitter</span>
                </a>
                <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors">
                    <i class="fa-brands fa-github"></i>
                    <span class="sr-only">GitHub</span>
                </a>
            </div>
        </div>
        <div class="text-center text-xs text-gray-400 dark:text-gray-500 mt-4">
            由 <a href="https://github.com/Deali-Axy" target="_blank" class="hover:text-blue-600 dark:hover:text-blue-500">DealiAxy</a> 开发
        </div>
    </div>
</footer>
